<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <!-- 查询 -->
        <el-form ref="dataRoom" :model="dataRoom" size="small" :inline="true" label-width="100px">
          <el-form-item label="请选择太空舱" prop="capsuleInfoId">
            <el-select ref="selectRoom" clearable v-model="dataRoom.capsuleInfoId" placeholder="请选择太空舱基地">
              <el-option v-for="(item ,index) in spaceRoomList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
              v-hasPermi="['system:user:export']">导出</el-button> -->
            <download-excel class="export-excel-wrapper" :fetch="createExportData" header="开锁记录数据" :data="dataList">
              <el-button type="warning" plain icon="el-icon-download"> 导出 </el-button>
            </download-excel>
          </el-col>
        </el-row>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 100%" class="mb20">
          <el-table-column prop="capsuleInfoId" label="ID" align="center">
          </el-table-column>
          <el-table-column prop="capsuleInfoTitle" label="项目" align="center" width="210">
          </el-table-column>
          <el-table-column prop="orderCnt" label="交易成功订单数" align="center">
          </el-table-column>
          <el-table-column prop="orderPayPrice" label="交易成功订单总收益" align="center">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.orderPayPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="refundOrderCnt" label="退款订单数" align="center">
          </el-table-column>
          <el-table-column prop="refundOrderPayPrice" label="退款订单总金额" align="center">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.refundOrderPayPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="realOrderCnt" label="实际订单数" align="center"></el-table-column>
          <el-table-column prop="realOrderPayPrice" label="实际收益" align="center">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.realOrderPayPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期" align="center">
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="dataRoom.pageNum" :page-size="dataRoom.pageSize"
          layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getorderPayPage,
    getExcelPay
  } from '@/api/spaceRun/lock'
  import {
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'
  export default {
    data() {
      return {
        loading: true,
        tableData: [],
        spaceRoomList: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        tiemValue: [],
        dataRoom: {
          capsuleInfoId: '',
          createBeginTime: '',
          createEndTime: '',
          pageNum: 1,
          pageSize: 10
        },
        dataList: [],
        flag: false
      }
    },
    created() {
      this.getorderPayPage()
      capsuleInfoSelects().then(res => {
        this.spaceRoomList = res.data
      })
    },
    methods: {
      async getorderPayPage() {
        this.loading = true
        this.dataRoom.pageNum = this.queryParams.pageNum
        this.dataRoom.pageSize = this.queryParams.pageSize
        getorderPayPage(this.dataRoom).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
          if (this.flag) {
            if (this.tableData.length > 0) {
              this.getExcelPay()
            } else {
              this.$message({
                message: '暂无数据！',
                type: 'warning'
              })
            }
          }
        })
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.getorderPayPage()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getorderPayPage()
      },
      onSubmitsear() {
        if (this.tiemValue != '') {
          this.dataRoom.createBeginTime = this.tiemValue[0]
          this.dataRoom.createEndTime = this.tiemValue[1]
        } else {
          this.dataRoom.createBeginTime = ''
          this.dataRoom.createEndTime = ''
        }
        this.getorderPayPage()
      },
      resetQuery() {
        this.flag = false
        this.dataRoom = {
          capsuleInfoId: '',
          createBeginTime: '',
          createEndTime: '',
          pageNum: 1,
          pageSize: 10
        }
        this.tiemValue = []
        this.getorderPayPage()
      },
      // 导出
      createExportData() {
        this.flag = true
        this.getorderPayPage()
      },
      async getExcelPay() {
        let data = await getExcelPay(this.dataRoom)
        const fileReader = new FileReader()
        fileReader.readAsDataURL(data)
        fileReader.onload = (event) => {
          let a = document.createElement('a')
          a.download = `订单数据报表_${new Date().getTime()}.xlsx`
          a.href = event.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      }
    }
  }
</script>

<style>

</style>
